<template>
  <!-- 我的 -->
  <view>
    <view class="u-page">
      <!-- 所有内容的容器 -->
      <view class="my-header">
        <navigator v-if="nickName.length==0" class="nomy-info" url="/pages/login/login" >
          <view class="no-info"><u-icon name="account" color="#cfcfcf" size="100"></u-icon></view>
          <view class="no-name">
            <view class="name-text">注册/登录</view>
          </view>
        </navigator>
        <view v-else class="my-info">
          <view class="my-img">
            <image :src="avatarUrl" mode="widthFix"></image>
            <view class="my-id">
              id：123456
            </view>
          </view>
          <view class="my-name">
            <view class="name-text">{{nickName}}</view>
            <view class="bardian">个性签名：好dahskdhasjkdhsajkhdj恒生科技爱好的开始的kashldashflhaslhasldhsald好</view>
          </view>
        </view>
        </view>
        <view class="my-content">
          <view @click="goSetting" class="content-item">
            <view class="item-name">
              <u-icon name="setting-fill" color="#0e0e0e" size="50"></u-icon>
              <text class="item-text">通用设置</text>
            </view>
            <u-icon name="arrow-right" color="#5a5a5a" size="36"></u-icon>
          </view>
          <view class="content-item">
            <view class="item-name">
              <u-icon name="account" color="#0e0e0e" size="50"></u-icon>
              <text class="item-text">账户与安全</text>
            </view>
            <u-icon name="arrow-right" color="#5a5a5a" size="36"></u-icon>
          </view>
          <view class="content-item">
            <view class="item-name">
              <u-icon name="setting-fill" color="#0e0e0e" size="50"></u-icon>
              <text class="item-text">教师认证</text>
            </view>
            <u-icon name="arrow-right" color="#5a5a5a" size="36"></u-icon>
          </view>
          <view @click="goToAboutUs" class="content-item">
            <view class="item-name">
              <u-icon name="error-circle-fill" color="#0e0e0e" size="50"></u-icon>
              <text class="item-text">关于我们</text>
            </view>
            <u-icon name="arrow-right" color="#5a5a5a" size="36"></u-icon>
          </view>
          <view class="content-item">
            <view class="item-name">
              <u-icon name="server-fill" color="#0e0e0e" size="50"></u-icon>
              <text class="item-text">客服中心</text>
            </view>
            <u-icon name="arrow-right" color="#5a5a5a" size="36"></u-icon>
          </view>
          <view class="content-item" @click="layout">
            <view class="item-name">
              <u-icon name="arrow-up-fill" color="#0e0e0e" size="50"></u-icon>
              <text class="item-text">退出登录</text>
            </view>
            <u-icon name="arrow-right" color="#5a5a5a" size="36"></u-icon>
          </view>
        </view>
    </view>
    <!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
    <u-tabbar v-model="current" :list="list" :mid-button="true"></u-tabbar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          iconPath: 'home',
          selectedIconPath: 'home-fill',
          text: '主页',
          count: 0,
          isDot: true,
          customIcon: false,
          pagePath: '/pages/navigation/home'
        },
        {
          iconPath: 'photo',
          selectedIconPath: 'photo-fill',
          text: '消息',
          customIcon: false,
          pagePath: '/pages/navigation/information'
        },
        {
          iconPath: 'https://cdn.uviewui.com/uview/common/min_button.png',
          selectedIconPath: 'https://cdn.uviewui.com/uview/common/min_button_select.png',
          text: '查找',
          midButton: true,
          customIcon: false,
          pagePath: '/pages/navigation/seek'
        },
        {
          iconPath: 'play-right',
          selectedIconPath: 'play-right-fill',
          text: '课程',
          customIcon: false,
          pagePath: '/pages/navigation/curriculum'
        },
        {
          iconPath: 'account',
          selectedIconPath: 'account-fill',
          text: '我的',
          count: 0,
          isDot: false,
          customIcon: false,
          pagePath: '/pages/navigation/my'
        }
      ],
      current: 4,
      wh: 0,
      info:true,
      nickName:'',
      avatarUrl:'',
      token:'',
      
    };
  },
  onLoad() {
    
    
  },
  onShow() {
   this.getInfo()
  },
 
  methods: {
    goToAboutUs(){
      uni.navigateTo({
        url:'/subpages/about_us/about_us'
      })
    },
    goSetting(){
      uni.navigateTo({
        url:'/subpages/setting/setting'
      })
    },
     getInfo(){
       let infoData = JSON.parse(uni.getStorageSync('info')||'{}')
       this.nickName = infoData.nickName || ''
       this.avatarUrl = infoData.avatarUrl || ''
     },
    async layout(){
       const [err, succ] = await uni.showModal({
           title: '提示',
           content: '确认退出登录吗？'
         }).catch(err => err)
       
         if (succ && succ.confirm) {
            uni.clearStorageSync('info')
            this.getInfo()
         }
     }
  }
};
</script>

<style scoped>
.my-header {
  height: 110px;
  background: #54bcbd;
  border-radius: 0 0 60px 60px;
}

.my-info,.nomy-info {
  padding: 0 24px;
  display: flex;
}
.nomy-info{
  align-items: center;
}
.no-info {
  margin-right: 15px;
  display: flex;
  width: 80px;
  height: 80px;
  border-radius: 40px;
  background: #fff;
  justify-content: center;
  align-items: center;
}
.my-img {
  margin-right: 15px;
  width: 80px;
}
.my-img image {
  width: 80px;
  border-radius: 40px;
}
.my-id {
  font-size: 12px;
  padding-left: 10px;
}
.my-name {
  padding-top: 8px;
  width: 65%;
}
.name-text {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
}
.bardian {
  font-size: 12px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.my-content {
  padding: 30px 15px 15px;
  line-height: 100rpx;
}
.content-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #d4d4d4;
}
.item-name {
  display: flex;
  align-items: center;
}
.item-text {
  margin-left: 10px;
}
</style>
